<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=["/js/service/spot.js","/js/service/protocol.js","/js/service/device.js","/webjars/1.0.0/js/components.js"
,"/js/components.js","/js/service/currentdata.js","/js/app/currentdata.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css","/css/index.css","/css/currentdata.css"] in base/>
<@base.page "">

    <div class="grid-content bg-purple-light">
        <el-col :span="24" class="content-wrapper">
            <section>
                <el-col :span="24">
                    <div :style="treeStyle">
                        <tree-spot-device @node_click="getTreeSelectedVal" v-bind:is-load-device="true"
                                          v-model="treeData" @collapse="collapse"></tree-spot-device>
                    </div>
                    <div :style="tableStyle">
                        <el-col :span="24" class="toolbar">
                            <el-form :inline="true" :model="searchVm">
                                <el-form-item label="">
                                    <el-input style="width:150px;" v-model="searchVm.channelCode" clearable
                                              placeholder="CH通道号"></el-input>
                                    <el-input style="width:150px;" v-model="searchVm.channelName" clearable
                                              placeholder="通道名称"></el-input>
                                    <el-select v-model="searchVm.dataType" clearable placeholder="类型">
                                        <el-option label="开关量" value="1"></el-option>
                                        <el-option label="模拟量" value="0"></el-option>
                                    </el-select>
                                    <el-checkbox
                                            v-model="searchVm.alarm"
                                            true-label=1
                                            false-label=0
                                            :change="changeAlarm"
                                            border>仅显示警报项
                                    </el-checkbox>
                                </el-form-item>
                                <@but.search "search()" ":loading='tableVm.loading'"/>
                                <el-form>
                        </el-col>
                        <!--表格-->
                        <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%"
                                  :max-height="contentHeight"
                                  v-loading="tableVm.loading">
                            <template slot="empty">
                                <span v-if="treeData.id !=undefined && treeData.isDevice">暂无数据</span>
                                <span v-else style="color: #ff0000;">选择设备后再查询</span>
                            </template>
                            <el-table-column prop="channelCode" label="CH" min-width="100"
                                             show-overflow-tooltip>
                                <template scope="scope">
                                    <label :class="{'alarm-class':scope.row.alarm===1,'':scope.row.alarm===0}">
                                        {{scope.row.channelCode}}
                                    </label>
                                </template>
                            </el-table-column>
                            <el-table-column prop="channelName" label="通道名称" min-width="100"
                                             show-overflow-tooltip>
                                <template scope="scope">
                                    <label :class="{'alarm-class':scope.row.alarm===1,'':scope.row.alarm===0}">
                                        {{scope.row.channelName}}
                                    </label>
                                </template>
                            </el-table-column>
                            <el-table-column prop="" label="值" min-width="100"
                                             show-overflow-tooltip>
                                <template scope="scope">
                                    <label :class="{'alarm-class':scope.row.alarm===1,'':scope.row.alarm===0}"
                                           v-if="scope.row.showValue!=null || scope.row.showValue!==''">
                                        {{scope.row.showValue + ' ' + scope.row.unit}}
                                    </label>
                                </template>
                            </el-table-column>
                            <el-table-column prop="dataType" label="类型" min-width="100" show-overflow-tooltip
                                             :formatter="formatter">
                                <template scope="scope">
                                    <label :class="{'alarm-class':scope.row.alarm===1,'':scope.row.alarm===0}">
                                        {{scope.row.dataType == null || scope.row.dataType === '' ||
                                        scope.row.dataType==undefined ? '未设置' :
                                        (scope.row.dataType == 1 ? '开关量' : '模拟量')}}
                                    </label>
                                </template>
                            </el-table-column>
                            <el-table-column prop="deviceName" label="设备名" min-width="100"
                                             show-overflow-tooltip>
                                <template scope="scope">
                                    <label :class="{'alarm-class':scope.row.alarm===1,'':scope.row.alarm===0}">
                                        {{scope.row.deviceName}}
                                    </label>
                                </template>
                            </el-table-column>
                            <el-table-column prop="spotName" label="所属站点" min-width="100"
                                             show-overflow-tooltip>
                                <template scope="scope">
                                    <label :class="{'alarm-class':scope.row.alarm===1,'':scope.row.alarm===0}">
                                        {{scope.row.spotName}}
                                    </label>
                                </template>
                            </el-table-column>
                            <el-table-column prop="updateTime" label="更新时间" min-width="100"
                                             show-overflow-tooltip>
                                <template scope="scope">
                                    <label :class="{'alarm-class':scope.row.alarm===1,'':scope.row.alarm===0}">
                                        {{scope.row.updateTime}}
                                    </label>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="tableVm.pageIndex"
                                    :page-size="tableVm.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="tableVm.total"
                                    :page-sizes="[10, 15, 50, 100, 500,1000]">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </section>
        </el-col>
    </div>

</@base.page>